<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<view class="main" :style="{ paddingTop: navBarHeight }">
			<view class="switch">切换语言</view>
			<image src="../../static/img/sign-02.png" class="banner"></image>
			<view class="bar-im">
				<view class="bar-tit">
					<image src="../../static/img/sign-03.png"></image>手机号
				</view>
				<view class="bar-num">
					<input type="text" v-model="phone" placeholder="请输入手机号">
				</view>
			</view>
			
			<view class="bar-im">
				<view class="bar-tit">
					<image src="../../static/img/sign-04.png"></image>验证码
				</view>
				<view class="bar-num f-row">
					<input type="text" v-model="code" placeholder="请输入验证码">
					<!-- 获取验证码 重新获取验证码 (60s)-->
					<view @click="getCode">{{ sendText }} <text v-if="codeFlage">({{ time }}s)</text></view>
				</view>
			</view>
			
			<view class="foot-btn" @click="next()">
				<view>
					下一步
				</view>
				
			</view>
			<!-- <button @click="getHc">获取缓存</button> -->
			
			
		</view>
	</view>
</template>

<script>
	import { throttle } from '@/utils/common.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	import { sendCodeApi , checkRegisterCode } from '@/api/api.js'
	export default {
		data() {
			return {
				phone: '',
				code: '',
				sendText: '获取验证码',
				
				codeFlage: false,
				timer: null,  // 定时器
				time: 60
			}
		},
		mixins: [navBarMixin],
		methods: {
			async getCode() {
				if(this.codeFlage) return
				console.log('进入发送验证码')
				if(!this.phone) {
					uni.showToast({
						title: '请先输入手机号码',
						icon: 'none'
					})
					return 
				}
				
				const res = await sendCodeApi({
					phone: this.phone
				})
				
				this.codeFlage = !this.codeFlage
				this.sendText = '重新获取验证码'
				this.handleTimer()
			},
			
			handleTimer() {
				if(!this.time) {
					this.codeFlage = false
					this.time = 60
					return
				}
				this.timer = setTimeout(() => {
					this.time--
					this.handleTimer()
				},1000)
				
			},
			next() {
				// if(!this.phone) 
				throttle(async () => {
					const res = await checkRegisterCode({
						phone: this.phone,
						code: this.code
					})
					console.log('res==',res)
					if(!res.code) {
						uni.navigateTo({
							url: '/pages/login/setPassWord?phone=' + this.phone
						})
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				},4000)
				
			},
			getHc() {
				const userNo = uni.getStorageSync('userNo')
				console.log('userNo==',userNo)
			}
		},
		onLoad() {}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;
		height: 100vh;
		background: url('../../static/img/sign-01.png') no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		.main {
			padding: 0 30rpx;
			
			.switch {
				margin-top: 60rpx;
				text-align: right;
				opacity: 0;
			}
			
			.banner {
				width: 100%;
			}
			
			.bar-im {
				margin-top: 44rpx;
				.bar-tit {
					display: flex;
					align-items: center;
					image {
						margin-right: 20rpx;
						width: 48rpx;
						height: 48rpx;
					}
				}
				.bar-num {
					padding: 0 30rpx;
					height: 80rpx;
					margin-top: 30rpx;
					background: #F8F8F8;
					border-radius: 10rpx;
					input {
						height: 100%;
					}
					
					&.f-row {
						display: flex;
						input {
							flex: 1;
						}
						view {
							padding: 0 10rpx;
							line-height: 80rpx;
							text-align: center;
							color: $theme-color-a;
						}
					}
				}
			}
			
			.foot-btn {
				margin-top: 110rpx;
				padding: 0 20rpx;
				view {
					
					line-height: 80rpx;
					background: #3F93FF;
					border-radius: 40rpx;
					text-align: center;
					color: #fff;
				}
			}
		}
	}
</style>